<template>
	<view class="main dispaly-col-center">
		<view class="title-box">
			<view class="title-bg">
				<image src="/static/icon/title-bg.png" mode="aspectFill" />
				<view class="title-txt">发布</view>
			</view>
		</view>
		<view class="container">
			<view class="form">
				<view class="form-item">
					<view class="name">名称</view>
					<view class="ipt-box">
						<view class="ipt-bg">
							<image src="/static/icon/b-ipt.png" mode="aspectFill" />
							<input placeholder="请输入名称" v-model="formData.name" />
						</view>
						<view class="edit">
							<image src="/static/pop/five.png" mode="aspectFill" />
						</view>
					</view>
				</view>
				<view class="form-block dispaly-just-between">
					<view class="form-item">
						<view class="name">分类</view>
						<view class="ipt-box w-302">
							<view class="ipt-bg w-302">
								<image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill" />
								<input placeholder="请选择分类" disabled @click="show = true" v-model="formData.categoryName" />
							</view>
							<view class="edit">
								<up-icon name="arrow-down-fill" color="#ffbf0f" size="16"></up-icon>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="name">价格</view>
						<view class="ipt-box w-302">
							<view class="ipt-bg w-302">
								<image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill" />
								<input placeholder="请输入价格" type="digit" v-model="formData.price" />
							</view>
							<view class="edit">
								<image src="/static/pop/five.png" mode="aspectFill" />
							</view>
						</view>
					</view>
				</view>
				<view class="form-block dispaly-just-between">
					<view class="form-item">
						<view class="name">发布起始时间</view>
						<view class="ipt-box w-302" @click="showStartDate = true">
							<view class="ipt-bg w-302">
								<image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill" />
								<input v-model="formData.startTime" placeholder="请选择发布起始时间" disabled />
							</view>
							<view class="edit">
								<up-icon name="arrow-down-fill" color="#ffbf0f" size="16"></up-icon>
							</view>
						</view>
					</view>
					<view class="form-item">
						<view class="name">发布结束时间</view>
						<view class="ipt-box w-302" @click="showEndDate = true">
							<view class="ipt-bg w-302">
								<image class="w-302" src="/static/icon/s-ipt.png" mode="aspectFill" />
								<input v-model="formData.endTime" placeholder="请选择发布结束时间" disabled />
							</view>
							<view class="edit">
								<up-icon name="arrow-down-fill" color="#ffbf0f" size="16"></up-icon>
							</view>
						</view>
					</view>
				</view>
				<view class="form-item">
					<view class="name">详情描述</view>
					<view class="desc">
						<textarea class="desc-text" cols="30" rows="10" placeholder="详情描述" v-model="formData.intro"></textarea>
					</view>
				</view>
			</view>
		</view>
	</view>
	<view class="btn-box">
		<view class="item-box dispaly-just-between">
			<view class="item">
				<view class="b-txt dispaly-align-center" @click="$goUrl('back')">取消</view>
				<image src="/static/icon/xy.png" mode="aspectFill" />
			</view>
			<view class="item">
				<view class="b-txt dispaly-align-center" style="color: #ffd257" @click="submit">发布</view>
				<image src="/static/icon/buy.png" mode="aspectFill" />
			</view>
		</view>
	</view>

	<up-picker
		@confirm="cateConfirm"
		@cancel="show = false"
		cancelColor="#ee003e"
		confirmColor="#2d68ea"
		:show="show"
		:columns="cateList"
		keyName="name"
		closeOnClickOverlay
		@close="show = false"
	></up-picker>
	<up-datetime-picker
		:show="showStartDate"
		v-model="startTime"
		mode="datetime"
		@cancel="showStartDate = false"
		@confirm="confirmDate(1)"
		closeOnClickOverlay
		:minDate="Date.now()"
		@close="showStartDate = false"
	></up-datetime-picker>
	<up-datetime-picker
		:show="showEndDate"
		v-model="endTime"
		mode="datetime"
		@cancel="showEndDate = false"
		@confirm="confirmDate(2)"
		:minDate="Date.now()"
		closeOnClickOverlay
		@close="showEndDate = false"
	></up-datetime-picker>
</template>

<script setup>
import { ref, reactive, watch } from 'vue';
import { dateFormat } from '@/utils/util';
import { productCate, publish, payment, proxy } from '@/api/apiList';
import { onLoad } from '@dcloudio/uni-app';
import { deleteObjectEmptyKey, wxPayment, debounce, throttle } from '@/utils/util';

let formData = reactive({
	name: '',
	price: '',
	categoryName: '',
	categoryId: '',
	type: 2,
	startTime: '',
	endTime: '',
	intro: ''
});

const content = ref('');
const sxPrice = ref(0);
const getProxy = async () => {
	const res = await proxy('helpFee');
	if (res.code == 200) {
		content.value = res.data.helpFee;
	}
};

watch(
	() => formData.price,
	(newV, oldV) => {
		sxPrice.value = (Number(content.value) / 100) * Number(formData.price);
	},
	{ deep: true }
);

const showStartDate = ref(false);
const showEndDate = ref(false);

// 选择时间
let startTime = ref(Date.now());
let endTime = ref(Date.now());
const confirmDate = (type) => {
	console.log(type);
	type == 1 ? (formData.startTime = dateFormat(startTime.value)) : (formData.endTime = dateFormat(endTime.value));
	console.log(formData, 'formData');
	showStartDate.value = false;
	showEndDate.value = false;
};

const show = ref(false);

const cateList = ref([]);
const getCateList = async () => {
	const res = await productCate({ type: 3 });
	if (res.code == 200) {
		cateList.value = [res.data];
	}
};

const cateConfirm = (data) => {
	formData.categoryName = data.value[0].name;
	formData.categoryId = data.value[0].id;
	show.value = false;
};

const submit = debounce(
	async () => {
		if (check()) {
			await uni.showLoading({
				title: '发布中'
			});
			const newFormData = deleteObjectEmptyKey(formData);
			const res = await publish(newFormData);
			if (res.code === 200) {
				const payRes = await payment({ id: res.data.id, type: 2 });
				wxPayment(payRes.data, '').then((result) => {
					if (result == 'ok') {
						formData.name = '';
						formData.price = '';
						formData.categoryName = '';
						formData.categoryId = '';
						formData.startTime = '';
						formData.endTime = '';
						formData.intro = '';
						formData.type = 2;
					}
				});
			} else {
				uni.hideLoading();
			}
		}
	},
	1000,
	false
);

// 校验
const check = () => {
	const { name, categoryName, price, startTime, endTime } = formData;

	if (!name) {
		uni.showToast({
			title: '请填写名称',
			icon: 'none'
		});
		return false;
	}
	if (!categoryName) {
		uni.showToast({
			title: '请选择分类',
			icon: 'none'
		});
		return false;
	}
	if (!price) {
		uni.showToast({
			title: '请填写价格',
			icon: 'none'
		});
		return false;
	}
	if (Number(price < 1)) {
		uni.showToast({
			title: '价格最低一块钱',
			icon: 'none'
		});
		return false;
	}
	if (!startTime) {
		uni.showToast({
			title: '请选择发布起始时间',
			icon: 'none'
		});
		return false;
	}
	if (!endTime) {
		uni.showToast({
			title: '请选择发布结束时间',
			icon: 'none'
		});
		return false;
	}
	return true;
};

onLoad(() => {
	getCateList();
	getProxy();
});
</script>

<style lang="scss" scoped>
.w-302 {
	width: 302rpx !important;
}
.h-60 {
	height: 60rpx !important;
}
.main {
	margin-top: 30rpx;

	.title-box {
		width: 692rpx;
		height: 78rpx;
		position: relative;

		.title-bg {
			width: 692rpx;
			height: 78rpx;

			image {
				width: 692rpx;
				height: 78rpx;
			}
		}

		.title-txt {
			width: 692rpx;
			height: 78rpx;
			position: absolute;
			top: 0;
			left: 0;
			right: 0;
			text-align: center;
			line-height: 78rpx;
		}
	}

	.container {
		box-sizing: border-box;
		width: 692rpx;
		border-left: 6rpx solid #4e3b0c;
		border-right: 6rpx solid #4e3b0c;
		border-bottom: 6rpx solid #4e3b0c;
		background: #ffd257;
		padding: 23rpx 10rpx 10rpx 10rpx;
		display: flex;
		justify-content: center;

		.form {
			.form-item {
				margin-bottom: 34rpx;
				.desc {
					height: 300rpx;
					width: 626rpx;
					border: 6rpx solid #4e3b0c;
					background: #e6bd4e;
					box-sizing: border-box;
					.desc-text {
						height: 100%;
						width: 100%;
						padding: 24rpx;
						color: #fff;
						box-sizing: border-box;
					}
				}
				.name {
					margin-bottom: 19rpx;
					font-size: 28rpx;
				}

				.ipt-box {
					position: relative;
					width: 636rpx;
					height: 60rpx;
					.ipt-bg {
						width: 636rpx;
						height: 60rpx;
						position: relative;
						input {
							position: absolute;
							top: 0;
							left: 0;
							height: 60rpx;
							padding: 0 0 0 20rpx;
							color: #fff;
							font-size: 23rpx;
						}
						image {
							width: 636rpx;
							height: 60rpx;
						}
					}
				}

				.edit {
					position: absolute;
					top: 15rpx;
					right: 15rpx;

					image {
						width: 23rpx;
						height: 23rpx;
					}
				}
			}
		}
	}

	.bottom-line {
		background: #ffd257;

		image {
			width: 692rpx;
			height: 10rpx;
		}
	}
}

.btn-box {
	width: 100%;
	height: 174rpx;
	position: fixed;
	left: 0;
	right: 0;
	bottom: 0;
	background: #ffd257;

	.item-box {
		padding: 18rpx 26rpx 0 26rpx;

		.item {
			position: relative;
			width: 330rpx;
			height: 80rpx;

			image {
				position: absolute;
				z-index: -1;
				left: 0;
				right: 0;
				top: 0;
				width: 330rpx;
				height: 80rpx;
			}

			.b-txt {
				font-family: IPix;
				font-size: 36rpx;
				color: #000000;
				width: 330rpx;
				height: 80rpx;
			}
		}
	}
}
</style>
